<template>
    <div class="home-banner">
        <XtxCarousel :sliders="sliders" />
    </div>
</template>
<script>
    // import { getBannerList } from "@/api/home"
    import { SET_CARNOUSEL_PIC } from "@/store/category/actionsType"
    import { computed, reactive, ref } from "vue"
    import { useStore } from 'vuex'

    export default {
        name: 'HomeBanner',
        setup() {
            // const sliders = ref([])
            // getBannerList().then(res => {
            //     console.log('轮播图',res);
            //     sliders.value = res.result
            // })
            const store = useStore()
            store.dispatch(SET_CARNOUSEL_PIC)
            const sliders = computed(() => {
                return store.state.category.sliders
            })
            return {
                sliders
            }
        }
    }
</script>
<style scoped lang="less">
    .home-banner {
        width: 1240px;
        height: 500px;
        position: absolute;
        left: 0;
        top: 0;
        z-index: 98;
    }

    .xtx-carousel {
        ::v-deep .carousel-btn.prev {
            left: 270px;
        }

        ::v-deep .carousel-indicator {
            padding-left: 250px;
        }
    }
</style>